options<template>
	<view class="login-container">
		<!-- Logo区域 -->
		<view class="logo-area">
			<view class="logo-container">
				<image class="logo" src="/static/登录/编组 11@2x.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 欢迎文本 -->
		<view class="welcome-text">
			<view class="title">登录之后，</view>
			<view class="title">即刻体验TODO</view>
		</view>
		
		<!-- 登录按钮区域 -->
		<view class="login-options">
			<view class="login-button wechat" @click="loginWithThirdParty('wechat')">
				<image class="login-icon" src="/static/登录/编组 13@2x.png" mode="aspectFit"></image>
				<view class="login-text">使用微信登录</view>
			</view>
			
			<view class="login-button alipay" @click="loginWithThirdParty('alipay')">
				<image class="login-icon" src="/static/登录/编组 14@2x.png" mode="aspectFit"></image>
				<view class="login-text">使用支付宝登录</view>
			</view>
			
			<view class="login-button apple" @click="loginWithThirdParty('apple')">
				<image class="login-icon" src="/static/登录/编组 16@2x.png" mode="aspectFit"></image>
				<view class="login-text">使用Apple 登录</view>
			</view>
		</view>
		
		<!-- 底部条款 -->
		<view class="terms-text">
			用户隐私与服务协议
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 第三方登录处理
			loginWithThirdParty(type) {
				console.log(`使用${type}登录`);
				// 直接跳转到主页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 50rpx;
		height: 100vh;
		background-color: #FFFFFF;
	}
	
	.logo-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10vh;
		margin-bottom: 100rpx;
	}
	
	.logo-container {
		width: 164rpx; /* 82px * 2 */
		height: 164rpx; /* 82px * 2 */
		opacity: 1;
		border-radius: 32rpx; /* 16px * 2 */
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(0, 0, 0, 0.09);
		box-shadow: 0rpx 8rpx 24rpx -8rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	
	.logo {
		width: 120rpx;
		height: 120rpx;
	}
	
	.logo-text {
		font-size: 50rpx;
		font-weight: bold;
		color: #000;
		letter-spacing: 2rpx;
	}
	
	.welcome-text {
		text-align: center;
		margin-bottom: 100rpx;
	}
	
	.title {
		font-size: 42rpx;
		margin-bottom: 16rpx;
		left: 115.5px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 30.41px;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		vertical-align: top;
	}
	
	
	.login-options {
		width: 100%;
	}
	
	.login-button {
		display: flex;
		align-items: center;
		height: 80rpx;
		width: 600rpx;
		margin: 0 auto 50rpx;
		border-radius: 48rpx;
		background-color: rgba(245, 245, 245, 1);
		opacity: 1;
		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
		box-sizing: border-box;
		position: relative;
	}
	
	.login-icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
	}
	
	.login-text {
		font-size: 28rpx;
		font-weight: normal;
		color: #333;
		width: 100%;
		text-align: center;
	}
	
	.terms-text {
		font-size: 24rpx;
		color: #999;
		margin-top: auto;
		text-align: center;
		padding-bottom: 50rpx;
		margin-top: 40rpx;
		text-decoration: underline;
		text-decoration-color: #ddd;
		width: 100%;
	}
	
	.terms-link {
		color: #999;
		text-decoration: underline;
	}
</style>